<template>
  <div class="trade-container">
    <div class="content">
      <div class="content1">收获信息</div>
      <div class="content2">
        <div class="left-add1">
          <link
            rel="stylesheet"
            href="//at.alicdn.com/t/c/font_3585743_tloryofrm2h.css"
          />
          <p class="line1">
            <a><i class="iconfont icon-didiandingwei_o"></i></a>
            <button>修改</button>
          </p>
          <p>收&nbsp货&nbsp人:川上富江</p>
          <p>联系方式:188****6306</p>
          <p>收获地址:北京市北京市西城区西长安街街道1232323</p>
        </div>
        <div class="right-add2">
          <p>
            <a href="#">地址切换</a>
          </p>
          <button>新建地址</button>
        </div>
      </div>
    </div>
    <div class="ItemInfo">
      <div class="info1">
        <div class="item1">包裹1</div>
        <div class="item2">
          <div class="cart-th">
            <div class="cart-th2">商品信息</div>
            <div class="cart-th3">单价</div>
            <div class="cart-th4">数量</div>
            <div class="cart-th5">小计</div>
            <div class="cart-th6">实付</div>
          </div>
          <div class="total">
            <ul class="cart-list">
              <li class="cart-list-con2">
                <img src="./images/goods1.png" />
                <div class="item-msg">
                  毛躁行人的就行 近0辐射负离子速干吹风机
                </div>
              </li>
              <li class="cart-list-con4">
                <span class="price">$399.00</span>
              </li>
              <li class="cart-list-con5">1</li>
              <li class="cart-list-con6">
                <span class="sum">$399</span>
              </li>
              <li class="cart-list-con7">$399</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="info2">
        <div class="list1">
          <div class="small1">
            <p class="ass1">使用优惠卷(0)张</p>
            <p class="ass2"><a href="#">兑换优惠卷</a></p>
          </div>
          <div class="small2">
            <p class="s-list1">使用余额</p>
            <p class="s-list2">可用余额 $0.00</p>
            <p class="s-list3"><a href="#">余额抵扣规则?</a></p>
          </div>
          <div class="small3">
            <p class="splist1">使用礼品卡</p>
            <p class="splist2">可用余额 $0.00</p>
            <p class="splist3"><a href="#">添加礼品卡</a></p>
          </div>
        </div>
        <div class="list2">
          <div class="list2-left">
            <p class="left1">发票信息:</p>
          </div>
          <div class="list2-right">
            <div class="right1">
              <p class="rplist1">商品合计 : $ 399.00</p>
              <p class="rplist2">邮费: $0.00</p>
              <p class="rplist3">活动优惠: $10.00</p>
              <p class="rplist4">信任活跃红包: $35.00</p>
              <p class="rplist5">
                应付总额: &nbsp&nbsp&nbsp&nbsp<span>$354.00</span>
              </p>
            </div>
            <div class="right2">
              <a class="sum-btn" href="###" target="_blank">去付款</a>
            </div>
            <div class="right3">
              <p>川上富江 188****6306</p>
              <p>北京市北京市西城区西长安街街道1232323</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'WTrade',
}
</script>
<script lang="ts" setup></script>

<style lang="less" scoped>
.trade-container {
  box-sizing: border-box;
  font: 12px/1.5 'Microsoft Yahei', '微软雅黑';
  width: 1088px;
  margin: 0 auto;
  .content {
    border: 1px solid #e8e8e8;
    background-color: #fff;
    margin-top: 20px;
    margin-bottom: 20px;
    .content1 {
      height: 41px;
      line-height: 41px;
      padding-left: 21px;
      font-size: 14px;
      background-color: #f5f5f5;
      color: #999;
    }
    .content2 {
      padding: 30px 0 30px 30px;
      height: 130px;
      .left-add1 {
        float: left;
        width: 800px;
        font-size: 14px;
        p {
          margin-top: 10px;
          button {
            width: 60px;
            margin-left: 20px;
            color: #b4a078;
            border: 1px solid #b4a078;
            background-color: #f5f3ef;
            border-radius: 2px;
            height: 28px;
            padding: 0;
            letter-spacing: normal;
            line-height: 26px;
            font-size: 12px;
            text-align: center;
            cursor: pointer;
            &hover {
              color: white !important;
            }
          }
          i {
            line-height: 23px;
            font-size: 23px;
            color: #b4a078;
          }
        }
        .line1 {
          display: flex;
          align-items: center;
        }
      }
      .right-add2 {
        float: right;
        width: 251px;
        height: 58px;
        border-left: 1px solid #e8e8e8;
        text-align: center;
        margin-top: 44px;
        p {
          line-height: 1;
          margin-bottom: 16px;
        }
        a {
          color: #69c;
        }
        button {
          border-radius: 2px;
          width: 96px;
          height: 28px;
          padding: 0;
          letter-spacing: normal;
          line-height: 26px;
          font-size: 12px;
          text-align: center;
          color: #333;
          border: 1px solid #ccc;
          background-color: #f5f5f5;
          cursor: pointer;
        }
      }
    }
  }
  .ItemInfo {
    margin-bottom: 96px;
    display: block;
    .info1 {
      .item1 {
        height: 42px;
        line-height: 40px;
        background: #f8f5f0;
        border: 1px solid #e8e8e8;
        margin: -1px 0;
        padding: 0 20px;
        color: #666;
        font-size: 14px;
        font-weight: 400;
      }
      .item2 {
        .cart-th {
          height: 42px;
          line-height: 40px;
          background-color: #f5f5f5;
          border: 1px solid #e8e8e8;
          margin: -1px 0;
          padding: 0 20px;
          color: #666;
          font-size: 14px;
          color: #999;
          & > div {
            float: left;
          }
          .cart-th2 {
            width: 40%;
          }
          .cart-th3 {
            width: 16%;
          }
          .cart-th4 {
            width: 16%;
          }
          .cart-th5 {
            width: 20%;
          }
          .cart-th6 {
            width: 5%;
          }
        }
        .total {
          padding: 20px;
          border: 1px solid #ddd;
          .cart-list {
            display: flex;
            align-items: center;
            overflow: hidden;
            & > li {
              float: left;
            }
            .cart-list-con2 {
              width: 40%;
              img {
                width: 100px;
                height: 100px;
                float: left;
                background-color: #f4f4f4;
              }
              .item-msg {
                float: left;
                width: 200px;
                margin: 0 10px;
                line-height: 18px;
                color: #69c;
                font-size: 14px;
              }
            }
            .cart-list-con4 {
              color: #69c;
              font-size: 14px;
              width: 17%;
            }
            .cart-list-con5 {
              color: #69c;
              width: 15%;
            }

            .cart-list-con6 {
              width: 20%;

              .sum {
                color: #69c;
                font-size: 14px;
              }
            }

            .cart-list-con7 {
              width: 5%;
              color: #69c;
              font-size: 14px;
            }
          }
        }
      }
    }
    .info2 {
      background-color: #f5f5f5;
      border-left: 1px solid #e8e8e8;
      border-right: 1px solid #e8e8e8;
      border-bottom: 1px solid #e8e8e8;
      .list1 {
        display: flex;
        flex-flow: row nowrap;
        padding: 20px 0;
        border-bottom: 1px solid #e8e8e8;
        min-height: 103px;
        .small1 {
          padding: 5px 20px;
          flex: 1;
          border-right: 1px dashed #ddd;
          float: left;
          .ass1 {
            font-size: 14px;
            color: #666;
            line-height: 1;
          }
          .ass2 {
            font-size: 10px;
            margin-top: 12px;
            line-height: 1;
            position: relative;
            a {
              color: #69c;
            }
          }
        }
        .small2 {
          padding: 5px 20px;
          flex: 1;
          border-right: 1px dashed #ddd;
          float: left;
          .s-list1 {
            font-size: 14px;
            color: #666;
            line-height: 1;
            margin-bottom: 12px;
          }
          .s-list2 {
            color: #333;
            margin-bottom: 15px;
          }
          .s-list3 {
            a {
              font-size: 14px;
            }
          }
        }
        .small3 {
          padding: 5px 20px;
          flex: 1;
          float: left;
          .splist1 {
            font-size: 14px;
            color: #666;
            line-height: 1;
          }
          .splist2 {
            margin-bottom: 12px;
            margin-top: 12px;
            font-size: 14px;
            color: #69c;
          }
          .splist3 {
            font-size: 14px;
            margin-top: 12px;
            line-height: 1;
            position: relative;
            a {
              font-size: 10px;
            }
          }
        }
      }
      .list2 {
        display: flex;
        flex-flow: row nowrap;
        padding: 20px 40px 40px 30px;
        overflow: hidden;
        .list2-left {
          margin-bottom: 30px;
          border-top: none;
          font-size: 14px;
          line-height: 18px;
          overflow: hidden;
          color: #666;
        }
        .list2-right {
          margin-right: 0;
          margin-left: auto;
          display: flex;
          flex-direction: column;
          text-align: right;
          position: relative;
          .right1 {
            .rplist1,
            .rplist2,
            .rplist3,
            .rplist4 {
              margin-bottom: 20px;
              font-size: 14px;
              color: #69c;
            }
          }
          .rplist5 {
            margin-bottom: 20px;
            padding-top: 24px;
            border-top: 1px solid #e8e8e8;
            font-size: 14px;
            display: inline-block;
            span {
              font-weight: 700;
              color: #d4282d;
              font-size: 20px;
            }
          }
          .right2 {
            .sum-btn {
              float: right;
              vertical-align: middle;
              display: flex;
              flex-direction: column;
              justify-content: center;
              width: 168px;
              height: 50px;
              line-height: 50px;
              font-size: 18px;
              color: #fff;
              border: 1px solid #b4a078;
              background-color: #b4a078;
              text-align: center;
              &:hover {
                color: white !important;
              }
            }
          }
          .right3 {
            color: #333;
            text-align: right;
            line-height: 22px;
            margin-top: 15px;
            p {
              margin: 0;
              padding: 0;
            }
          }
        }
      }
    }
  }
}
</style>
